import React, { useState, useEffect, useRef } from 'react'
import './myscss/Mima.scss'
import { Lock } from '@react-vant/icons'
import axios from 'axios';
import { Input } from 'antd';
import { Toast } from 'react-vant';
import { useNavigate } from 'react-router-dom';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Phone() {
  let navigate = useNavigate();


  const [old_pass, setOld_pass] = useState('');
  const [new_pass, setNew_pass] = useState('');
  const [new_pass1, setNew_pass1] = useState('');
  const [list_phone, setList_phone] = useState([])



  let getPhone = async () => {
    let { data: { list_phone } } = await axios.get('/user_phone')
    setList_phone(list_phone)
  }


  //修改密码
  let update_Mima = async () => {
    if (new_pass.length < 6) {
      Toast('新密码格式不正确')
    } else if (new_pass !== new_pass1) {
      Toast('两次密码不一致')
    } else if (new_pass === '') {
      Toast('新密码不能为空')
    } else {
      let obj = {
       old_pass:new_pass,
       id:list_phone[list_phone.length - 1]._id,
      }
      let { data } = await axios.post('/update_Mima', obj)
      console.log(data.code);
      if (data.code === 200) {
        Toast('修改成功')
        navigate('/MinPage/Setup')
      } else {
        Toast('该手机号已被占用')
      }

    }
  }

  // 使用 useEffect 设置定时器
  useEffect(() => {
    getPhone()
   
  }, []); // 空数组作为第二个参数，表示只在组件挂载和卸载时运行
  return (
    <div id='Mima'>
      <div id="main">
      
        <div className='fans_length'>
          <b onClick={() => { navigate('/MinPage/Setup') }}>&lt;</b><span>修改密码</span>
        </div>
        <div className='Mima_input'>
          <div>
            <Input prefix={<Lock />} value={old_pass} type="password" placeholder='请输入旧密码' onChange={(e) => { setOld_pass(e.target.value) }} />

          </div>
          <div>
            <Input prefix={<Lock />} value={new_pass} type="password" placeholder='请输入6-20位新密码' onChange={(e) => { setNew_pass(e.target.value) }} />


          </div>
          <div>
            <Input prefix={<Lock />} value={new_pass1} type="password" placeholder='请输入确认新密码' onChange={(e) => { setNew_pass1(e.target.value) }} />


          </div>
          <div>
            <button onClick={() => { update_Mima() }}>提交</button>
          </div>
        </div>

      </div>
    </div>
  )
}

